<!--
 * @Descripttion: 工作计划
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-07-29 10:40:41
 * @LastEditors: GW
 * @LastEditTime: 2022-04-08 11:50:27
-->

<template>
    <nly-content-wrapper>
        <div class="work-content-wrapper">
            <!--按钮-->
            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col :class="tabKey!=1?'btns-disable':''" :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                            <div class="btns" @click="tabKey==1?AddItem():''">
                                <a-icon class="btns-icon" type="file-add" />
                                <div class="btns-text">新增</div>
                            </div>
                        </a-col>
                        <a-col :class="tabKey!=1?'btns-disable':''" :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                            <div class="btns" @click="tabKey==1?EdiItem():''">
                                <a-icon class="btns-icon" type="edit" />
                                <div class="btns-text">编辑</div>
                            </div>
                        </a-col>
                        <a-col :class="tabKey!=1?'btns-disable':''" :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                            <div style="position:relative">
                                <div class="btns" @click="tabKey==1?deleteForm():''">
                                    <a-icon class="btns-icon" type="delete" />
                                    <div class="btns-text">删除</div>
                                </div>
                                <div style="position:absolute;width:2px;height:36px;border-radius:6px;background:#ccc;top:0px;right:0px;"></div>
                            </div>
                        </a-col>

                    </a-col>
                </a-row>
            </div>

            <a-tabs style="height: 100%;" @change="tabChange">
                <a-tab-pane key="1" tab="我的计划">
                    <nly-row class="ml-1 mb-2 lr">
                        <nly-col xs="12" sm="12" md="12" lg="12" xl="12" class="form-inline" style="justify-content: left;">
                            <form-input title="标题" id="title" labelStyle rightStyle="width:120px;" class="ml-2" v-model="postData.title" />
                            <form-select title="周期" class="ml-2" rightStyle="width:120px;" v-model="postData.type" addDefaultText="全部" :dataList="[
                            { key: '日', title: '日' },
                            { key: '周', title: '周' },
                            { key: '月', title: '月' },
                            { key: '季', title: '季' },
                            { key: '年', title: '年' }]" />
                            <form-select title="状态" class="ml-2" rightStyle="width:120px;" v-model="postData.status" addDefaultText="全部" :dataList="[
                            { key: 0, title: '未审核' },
                            { key: 1, title: '已审核' }]" />
                            <nly-button variant="info" @click="PageList" button-class="mr-2" style="margin-left: 35px;">查询</nly-button>
                        </nly-col>
                    </nly-row>
                    <div style="margin-top: 10px">
                        <a-button type="primary" class="crm-btn" @click="AddItem">新增</a-button>
                        <!-- <a-button type="primary" class="crm-btn" @click="EdiItem">编辑</a-button> -->
                        <a-button type="primary" class="crm-btn" @click="deleteForm">删除</a-button>
                        <!-- <a-button type="primary" class="crm-btn" @click="() => {submitVisible = true,ccUserNames='',ccUserIds='',checkedUserKeys=[]}">报送</a-button> -->
                    </div>
                    <!-- 列表 -->
                    <a-table :columns="columns" :components="components" :data-source="data" :scroll="{ x: 500, y: 500}" style="height: calc(100vh - 20rem);" bordered :pagination="pagination" @change="onTableChange" :row-selection="{selectedRowKeys: selectedKeys, onChange: selection}"></a-table>
                </a-tab-pane>
                <a-tab-pane key="2" tab="审批计划">
                    <nly-row class="ml-1 mb-2 lr mt-4">
                        <nly-col xs="12" sm="12" md="12" lg="12" xl="12" class="form-inline" style="justify-content: left;">
                            <form-input title="标题" id="title" labelStyle rightStyle="width:120px;" class="ml-2" v-model="postData.title" />
                            <form-select title="周期" class="ml-2" rightStyle="width:120px;" v-model="postData.type" addDefaultText="全部" :dataList="[
                            { key: '日', title: '日' },
                            { key: '周', title: '周' },
                            { key: '月', title: '月' },
                            { key: '季', title: '季' },
                            { key: '年', title: '年' }]" />
                            <form-select title="状态" class="ml-2" rightStyle="width:120px;" v-model="postData.status" addDefaultText="全部" :dataList="[
                            { key: 0, title: '未审核' },
                            { key: 1, title: '已审核' }]" />
                            <nly-button variant="info" @click="PageList" button-class="mr-2" style="margin-left: 35px;">查询</nly-button>
                        </nly-col>
                    </nly-row>
                    <div style="margin-top: 20px">
                        <a-button type="primary" class="crm-btn" @click="approval(1)">审核通过</a-button>
                        <a-button type="primary" class="crm-btn" @click="approval(2)">审核驳回</a-button>
                    </div>
                    <!-- 列表 -->
                    <a-table :columns="columns" :components="components" :data-source="data" :scroll="{ x: 500, y: 500}" style="height: calc(100vh - 20rem);" bordered :pagination="pagination" @change="onTableChange" :row-selection="{selectedRowKeys: selectedKeys, onChange: selection}"></a-table>
                </a-tab-pane>
            </a-tabs>
            <!-- modal 弹窗  -->
            <drag-modal v-model="eidtModelShow" centered class="edit-modal-class" :title="editItem.id ? '编辑工作计划' : '新增工作计划'" @cancel="() => (eidtModelShow = false)" width="1000px">
                <div id="components-form-demo-advanced-search">
                    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
                        <!-- <div class="line" style="color:#1980Ff;font-size:15px;">基本信息</div> -->
                        <a-row :gutter="24">
                            <a-col :span="12">
                                <a-form-item label="标题">
                                    <a-input autocomplete="off" v-decorator="['title', { rules: [{ required: true, message: '标题不能为空' }] }]" placeholder="请输入标题" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="24">
                            <a-col :span="12">
                                <a-form-item label="类型">
                                    <a-select v-decorator="['type', { rules: [{ required: true, message: '请选择类型' }] }]" placeholder="请选择类型" @change="handleChange">
                                        <a-select-option value="日">日</a-select-option>
                                        <a-select-option value="周">周</a-select-option>
                                        <a-select-option value="月">月</a-select-option>
                                        <a-select-option value="季">季</a-select-option>
                                        <a-select-option value="年">年</a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="24">
                            <a-col :span="12">
                                <a-form-item label="起止日期">
                                    <a-range-picker :showTime="true" format="YYYY-MM-DD" @change="dateChange" style="width: 228px" v-decorator="['formDate', { rules: [{ required: true, message: '请选择时间' }] }]" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="24">
                            <a-col :span="24" class="fill-in-class">
                                <div style="font-weight:bold;color:#222;margin-left:13px;"><span class="color-red"></span>{{planText}}：</div>
                                <div class="edit-box" style="padding: 10px;">
                                    <!-- <ueditor :content.sync="content"></ueditor> -->
                                    <a-textarea style="min-height:200px" v-model="content"></a-textarea>
                                </div>
                            </a-col>
                            <!-- <a-col :span="24">
                                <div style="font-weight:bold;color:#222"><span class="color-red"></span>工作计划：</div>
                                <a-textarea placeholder="请输入自我评价" :rows="5" v-decorator="['myEvaluationContent', { rules: [{ required: false, message: '' }] }]" />
                            </a-col> -->
                        </a-row>
                        <!-- <div class="line" style="color:#1980Ff;font-size:15px;">计划明细</div>
                        <a-table bordered :data-source="detailData" :columns="detailColumns" :pagination="false" :components="detailComponents">
                            <template v-for="col in ['content', 'cause', 'remarks']" :slot="col" slot-scope="text, record">
                                <div data-key="">
                                    <a-textarea auto-size style="margin: -5px 0;border-radius:0;border: 0;" v-model="record[col]" />
                                </div>
                            </template>
                            <template slot="status" slot-scope="text, record">
                                <a-select v-model="record.status" @change="statusChange">
                                    <a-select-option value="0">未完成</a-select-option>
                                    <a-select-option value="1">完成</a-select-option>
                                </a-select>
                            </template>
                            <template slot="operation" slot-scope="text, record, index">
                                <a-popconfirm icon=" " title="" ok-text="增加行" cancel-text="删除行" @confirm="handleAdd" @cancel="() => onDelete(record.key)">
                                    <a href="#">{{index + 1}}</a>
                                </a-popconfirm>
                            </template>
                            <template slot="delete" slot-scope="text, record">
                                <a-popconfirm title="确定要删除?" @confirm="() => onDelete(record.key)"></a-popconfirm>
                                <a href="javascript:;" @click="onDelete(record.key)">+-</a>
                            </template>
                        </a-table> -->

                        <!-- <a-row :gutter="24">
                        <a-col :span="12" :pull="2" style="margin-top: 20px;">
                            <a-form-item label="报送">
                            <input-group-search modalTitle="请选择报送人"  rightStyle="width: 250px;margin-top: -45px;" treeType="officeUser" :valueTitle.sync="submitUserName" v-model="submitUserId"/>
                            </a-form-item>
                        </a-col>
                        <a-col :span="10" style="margin-top: 20px;">
                            <a-form-item label="抄送">
                            <a-input-search  v-model="ccUserNames" read-only @click="() => (ccUserVisible=true)" @search="() => (ccUserVisible = true)"/>
                            </a-form-item>
                        </a-col>
                        </a-row> -->

                        <div v-show="!isSaveBtnShow" class="line" style="color:#1980Ff;font-size:15px;margin-top: 20px;">计划评价</div>
                        <div v-show="!isSaveBtnShow">
                            <a-row :gutter="24">
                                <a-col :span="6">
                                    <a-form-item label="完成情况">
                                        <a-select placeholder="完成情况" default-value="0" v-model="finishStatus" disabled>
                                            <a-select-option value="false">未完成</a-select-option>
                                            <a-select-option value="true">已完成</a-select-option>
                                        </a-select>
                                    </a-form-item>
                                </a-col>
                                <a-col :span="10">
                                    <a-form-item label="未完成原因">
                                        <a-input placeholder="请输入未完成原因" v-model="notFinishCause" />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row :gutter="24">
                                <a-col :span="24" :pull="6">
                                    <a-form-item label="主管评价">
                                        <a-textarea placeholder="请输入评价" :rows="5" v-model="evaluationContent" />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row :gutter="24">
                                <a-col :span="6">
                                    <a-form-item label="评价等级">
                                        <a-select placeholder="选择评价等级" v-model="evaluationLevel">
                                            <a-select-option value="A">A</a-select-option>
                                            <a-select-option value="B">B</a-select-option>
                                            <a-select-option value="C">C</a-select-option>
                                            <a-select-option value="D">D</a-select-option>
                                        </a-select>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                        </div>
                        <!-- <a-button class="editable-add-btn" @click="handleAdd">添加明细</a-button> -->
                    </a-form>
                </div>
                <template slot="footer">
                    <a-button v-show="!isSaveBtnShow" type="primary" html-type="submit" @click="saveEvaluation">保存评价</a-button>
                    <a-button v-show="isSaveBtnShow" type="primary" html-type="submit" @click="handleSubmit">保存</a-button>
                    <!-- <a-button :style="{ marginLeft: '8px' }" @click="handleReset">重置</a-button> -->
                    <a-button :style="{ marginLeft: '8px' }" @click="() => (eidtModelShow = false)">关闭</a-button>
                </template>
            </drag-modal>
            <a-modal v-model="submitVisible" title="报送计划" centered on-ok="handleok" width="500px">
                <a-form class="ant-advanced-search-form" :label-col="{ span: 6 }" :wrapper-col="{ span: 22 }" :form="form">
                    <a-row :gutter="24">
                        <a-col :span="24" :pull="2">
                            <a-form-item label="报送人">
                                <!-- <a-input-search placeholder="请选择报送人" v-model="ccUserNames" read-only @click="() => (ccUserVisible = true)" @search="() => (ccUserVisible = true)"/> -->
                                <input-group-search modalTitle="请选择抄送人" rightStyle="width: 370px;margin-top: -45px;" treeType="officeUser" :valueTitle.sync="submitUserName" v-model="submitUserId" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="24">
                        <a-col :span="24" :pull="2">
                            <a-form-item label="抄送人">
                                <a-input-search v-model="ccUserNames" read-only @click="() => (ccUserVisible=true)" @search="() => (ccUserVisible = true)" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
                <template slot="footer">
                    <a-button type="primary" html-type="submit" @click="submit">报送</a-button>
                    <a-button :style="{ marginLeft: '8px' }" @click="handleReset">重置</a-button>
                    <a-button :style="{ marginLeft: '8px' }" @click="() => (submitVisible = false)">关闭</a-button>
                </template>
            </a-modal>
            <a-modal v-model="ccUserVisible" title="抄送人选择" centered on-ok="handleok" width="300px">
                <div style="height: 400px;overflow-y:scroll;">
                    <a-input-search style="margin-bottom: 8px" placeholder="输入用户名称" @change="onChange" />
                    <div v-show="treeAShow">
                        <a-tree v-model="checkedUserKeys" :tree-data="userSearchData" :show-icon="true" :expanded-keys="expandedUserKeys" @expand="expanedChange" :defaultExpandAll="true" checkable @check="userCheck">
                            <a-icon slot="user" type="user" />
                        </a-tree>
                    </div>
                    <div v-show="treeBShow">
                        <a-tree v-model="checkedUserKeys" :tree-data="userAllData" :show-icon="true" checkable :defaultExpandAll="true" @check="userCheck">
                            <a-icon slot="user" type="user" />
                        </a-tree>
                    </div>
                </div>
                <template slot="footer">
                    <a-button key="submit" type="primary" @click="() => (ccUserVisible = false)">确定</a-button>
                    <a-button key="back" @click="() => (ccUserVisible = false)">关闭</a-button>
                </template>
            </a-modal>
        </div>
    </nly-content-wrapper>
</template>

<script>
import moment from 'moment';
import getDate from "@/utils/tool/date";
import { FormInput, FormSelect } from "@/components/Form";
// import { save, pageList, deleteForm, submit, approval, getPlanContent, returnPlan, saveEvaluation } from "@/api/work/planSummary";
import { listToMap } from "@/utils/tool/map";
import { components } from "@/utils/antTableComponents";
import { TreeDataOffice } from "@/api/office";
import { officeUserListToTree, searchInTreeData } from "@/utils/tree";
import ueditor from '@/components/Ueditor/index';

import Vue from "vue";
const basePostData = {
    current: 1,
    size: 20
};

export default {
    components: {
        FormInput,
        FormSelect,
        ueditor
    },
    data () {
        const detailColumns = [
            {
                title: "序号",
                dataIndex: 'key',
                key: 'key',
                width: 50,
                scopedSlots: { customRender: "operation" }
            },
            {
                title: "工作计划内容",
                dataIndex: "content",
                key: "content",
                width: 150,
                scopedSlots: { customRender: "content" }
            },
            {
                title: "完成情况",
                dataIndex: "status",
                key: "status",
                width: 120,
                scopedSlots: { customRender: "status" }
            },
            {
                title: "未完成原因",
                dataIndex: "cause",
                key: "cause",
                width: 100,
                scopedSlots: { customRender: "cause" }
            },
            {
                title: "备注",
                dataIndex: "remarks",
                key: "remarks",
                width: 120,
                scopedSlots: { customRender: "remarks" }
            },
            // {
            //   title: "操作",
            //   dataIndex: "delete",
            //   key: "delete",
            //   width: 80,
            //   scopedSlots: { customRender: "delete" }
            // }
        ];
        const columns = [
            {
                title: "标题",
                dataIndex: "title",
                key: "x",
                width: 120,
                customRender: (text, row) => {
                    return (
                        <span>
                            <i class={row.title || ""} style="margin-right:5px;"></i>
                            <a href="javascript:;" onClick={() => this.EdiItem(row)}>{text}</a>
                        </span>
                    );
                }
            },
            {
                title: "周期",
                dataIndex: "type",
                key: "type",
                width: 120
            },
            {
                title: "开始日期",
                dataIndex: "beginDate",
                key: "beginDate",
                width: 120,
                customRender: (text, row) => {
                    return moment(text).format("YYYY-MM-DD");
                }
            },
            {
                title: "结束日期",
                dataIndex: "endDate",
                key: "endDate",
                width: 120,
                customRender: (text, row) => {
                    return moment(text).format("YYYY-MM-DD");
                }
            },
            {
                title: "计划完成情况",
                dataIndex: "finishStatus",
                key: "finishStatus",
                width: 120,
                customRender: (text, row) => {
                    return text ? "完成" : "未完成";
                }
            },
            {
                title: "未完成原因",
                dataIndex: "notFinishCause",
                key: "notFinishCause",
                width: 120
            },
            {
                title: "自我评价",
                dataIndex: "myEvaluationContent",
                key: "myEvaluationContent",
                width: 120
            },
            {
                title: "主管评价",
                dataIndex: "evaluationContent",
                key: "evaluationContent",
                width: 120
            },
            {
                title: "主管评价等级",
                dataIndex: "evaluationLevel",
                key: "evaluationLevel",
                width: 120
            },
            {
                title: "发送人",
                dataIndex: "createUserName",
                key: "createUserName",
                width: 120
            },
            {
                title: "报送给",
                dataIndex: "submitName",
                key: "submitName",
                width: 120
            },
            {
                title: "抄送给",
                dataIndex: "ccName",
                key: "ccName",
                width: 120
            },
            {
                title: "状态",
                dataIndex: "readStatus",
                key: "readStatus",
                width: 120,
                customRender: (text, row) => {
                    const status = ["未审核", "审核通过", "审核未通过"];
                    if (row.status == 0) {
                        return "未提交";
                    } else {
                        return status[text];
                    }
                }
            },
            {
                title: "操作",
                dataIndex: "id",
                key: "id",
                width: 120,
                customRender: (text, row) => {
                    if (this.tabKey == 2) {
                        if (!row.evaluationLevel) {
                            // return ( <div class="row justify-content-md-center">
                            //     <span class="col-sm-auto col-md-auto col-lg-auto col-xl-auto">
                            //       <a href="javascript:;" title="评价" class="mr-1 col-1" onClick={() => (this.evaluationVisible = true, this.planEditem = row)}>评价</a>
                            //     </span>
                            //   </div>
                            // );
                        }
                    } else {
                        if (row.status == 0) {
                            return (<div class="row justify-content-md-center">
                                <span class="col-sm-auto col-md-auto col-lg-auto col-xl-auto">
                                    <a href="javascript:;" title="报送" class="mr-1 col-1" onClick={() => (this.submitVisible = true, this.planEditem = row)}>报送</a>
                                </span>
                            </div>
                            );
                        } else {
                            if (row.readStatus == 0) {
                                return (<div class="row justify-content-md-center">
                                    <span class="col-sm-auto col-md-auto col-lg-auto col-xl-auto">
                                        <a href="javascript:;" title="撤回" class="mr-1 col-1" onClick={() => this.returnPlan(row)}>撤回 </a>
                                    </span>
                                </div>
                                );
                            }
                        }
                    }
                }
            }
        ];

        //表格 头部 可伸缩
        this.detailComponents = components(detailColumns);
        this.components = components(columns);
        return {
            //----------↓样式----------
            btnGrid: {
                xs: 2,
                sm: 2,
                md: 2,
                lg: 2,
                xl: 2
            },
            //----------↑样式----------
            //gw 2021年8月31日08:46:03
            typeCheck: 1,//工作报表类型
            associatedBusiness: null,//关联业务
            //gw 2021年8月31日08:46:12
            tabKey: 1,
            header: { "Access-Token": Vue.ls.get("Access-Token") },
            fileList: [],
            postData: { ...basePostData },
            data: [],
            detailData: [],
            count: 0,
            detailColumns,
            columns,
            validateStatus: "success",
            isShow: "display:block",
            form: this.$form.createForm(this, { name: "advanced_search" }),
            errorMsg: null,
            isDisabled: false,
            pagination: {
                defaultPageSize: 20,
                current: 1,
                pageSize: 20,
                total: 0,
                showTotal: total => {
                    return (
                        <div>
                            共 {total} 条数据，每页
                            <a-input-number
                                value={this.pagination.pageSize}
                                min={1}
                                max={500}
                                onPressEnter={e => this.changePageSize(e)}
                            />
                            条
                        </div>
                    );
                },
                showQuickJumper: true,
                showLessItems: true
            },
            planEditem: {},
            show: false, //是否显示
            editItem: {}, //新增/编辑对象
            selectedKeys: [],  //table选中key
            userSearchData: [], //用户搜索数据
            userAllData: [], //用户所有tree数据
            treeAShow: false, //搜索用户tree
            treeBShow: true, //用户tree
            expandedUserKeys: [],
            eidtModelShow: false,
            selectedIds: [],  //table选中id
            selectedData: [], //table选中数据
            editorContent: '',  //富文本内容
            editor: null,
            dateSting: [], //起止日期
            submitVisible: false, //报送弹窗
            submitUserVisible: false, //报送人弹窗
            ccUserVisible: false, //抄送人弹窗
            evaluationVisible: false, //评价弹窗
            checkedUserKeys: [], //用户tree keys
            ccUserNames: "", //抄送人姓名
            ccUserIds: "", //抄送人id
            submitUserName: "", //报送人姓名
            submitUserId: "", //报送人id
            isSaveBtnShow: true, //是否显示保存按钮
            notFinishCause: null, //未完成原因
            finishStatus: "false", //完成情况
            evaluationContent: null, //评价内容
            evaluationLevel: "A", //评价等级
            planText: "工作计划", //计划标题
        };
    },
    mounted () {
        this.PageList();
        TreeDataOffice({ isLoadUser: 2 }).then(response => {
            const { data } = response;
            const childrenNav = [];
            officeUserListToTree(data, childrenNav, "0");
            this.userAllData = childrenNav;
            this.userSearchData = childrenNav;
        });
    },
    methods: {
        //tab 切换
        tabChange (key) {
            console.log(key);
            this.tabKey = key;
            this.selectedKeys = [];
            this.selectedIds = [];
            this.selectedData = [];
            if (key == 1) {
                this.isSaveBtnShow = true;
                this.postData.createUserId = null;
            } else {
                this.isSaveBtnShow = false;
                this.postData.createUserId = "6666";
            }
            this.PageList();
        },
        //添加
        AddItem () {
            this.editItem = {};
            this.fileList = [];
            const { count, detailData } = this;
            const newData = {
                key: count,
                content: "",
                status: "0",
                cause: "",
                remarks: ""
            };
            this.detailData = [newData];
            this.count = count + 1;
            this.eidtModelShow = true;
            this.checkedUserKeys = [];
            this.handleReset();
        },
        //编辑
        EdiItem (data) {
            console.log(data);
            this.eidtModelShow = true;
            this.editItem = { ...data };
            //赋值文档
            // if(data.files) {
            //   this.fileList = [{
            //   uid: '1',
            //   name: data.files,
            //   status: 'done',
            //   url: data.files,
            //   thumbUrl: data.files
            // }];
            // }
            //form赋值
            this.form = this.$form.createForm(this, {
                mapPropsToFields: () => {
                    return {
                        title: this.$form.createFormField({
                            value: data.title
                        }),
                        type: this.$form.createFormField({
                            value: data.type
                        }),
                        myEvaluationContent: this.$form.createFormField({
                            value: data.myEvaluationContent
                        }),
                        formDate: this.$form.createFormField({
                            value: [moment(data.beginDate, 'YYYY-MM-DD HH:mm'), moment(data.endDate, 'YYYY-MM-DD HH:mm')]
                        })
                    };
                }
            });
            //赋值计划内容
            getPlanContent({ planId: this.editItem.id }).then(response => {
                this.detailData = response.data;
            });
            //评价赋值
            this.notFinishCause = data.notFinishCause;
            this.finishStatus = data.finishStatus + "";
            this.evaluationContent = data.evaluationContent;
            this.evaluationLevel = data.evaluationLevel;
        },
        // 删除计划
        deleteForm () {
            if (this.selectedIds.length < 1) {
                this.$message.warning("请选择要删除的计划");
                return;
            }

            this.$nlyaModal
                .msgBoxConfirm("您确定要删除该计划吗？", {
                    title: "请确认是否需要马上删除",
                    size: "sm",
                    buttonSize: "md",
                    okTitle: "是",
                    cancelTitle: "否",
                    titleTag: "h6",
                    headerClass: "p-2",
                    footerClass: "p-2",
                    hideHeaderClose: false,
                    centered: true
                })
                .then(value => {
                    if (value) {
                        deleteForm(this.selectedIds).then(response => {
                            if (response.code == 200) {
                                this.$message.success("删除成功");
                                this.PageList();
                            } else {
                                // this.$message.warning(response.message);
                            }
                        });
                    }
                });
        },
        onDelete (key) {
            if (this.tabKey == 1) {
                if (this.detailData.length < 2) {
                    return;
                }
                let _this = this;
                this.$confirm({
                  title: '提示',
                  content: '您确定要删除吗？',
                  onOk() {
                    const dataSource = [..._this.detailData];
                    _this.detailData = dataSource.filter(item => item.key !== key);
                  },
                  onCancel() {
                  },
                });
            }
        },
        // 获取列表
        PageList () {
            const { postData } = this;
            postData.workType = 1;
            pageList(postData).then(response => {
                if (response.code === 200) {
                    const { data } = response;
                    const { records, total, current, size } = data;
                    this.data = records;
                    Object.assign(this.pagination, {
                        total
                    });
                }
            }).catch(error => { });
        },
        //审核计划
        approval (val) {
            if (this.selectedIds.length < 1) {
                this.$message.warning("请选择计划");
                return;
            }

            const plans = this.selectedData;
            for (let i = 0; i < plans.length; i++) {
                if (plans[i].readStatus != 0) {
                    this.$message.warning("请选择未审核的计划");
                    return;
                }
                plans[i].readStatus = val;
                plans[i].createDate = null;
                plans[i].submitDate = null;
            }

            approval(plans).then(response => {
                if (response.code == 200) {
                    this.submitVisible = false;
                    this.$message.success("审核完成");
                    this.PageList();
                } else {
                    this.PageList();
                    // this.$message.warning(response.message);
                }
            });
        },
        //获取
        showFunction () {
            this.show = !this.show;
        },
        //表单重置
        handleReset () {
            this.form.resetFields();
        },
        //保存计划
        handleSubmit (e) {
            console.log(this.detailData);
            e.preventDefault();
            this.form.validateFields((err, values) => {
                if (!err) {
                    // if (this.fileList.length > 1) {
                        // this.$message.warn("请上传一个文件");
                    //   return false;
                    // }
                    if (this.detailData.length < 1) {
                        this.$message.warning("请添加明细");
                        return;
                    }

                    if (this.detailData.some(item => !item.content)) {
                        this.$message.warning("明细内容不能为空");
                        return;
                    }
                    const id = this.editItem.id;
                    this.editItem = { ...values };
                    this.editItem.id = id;
                    this.editItem.workType = 1
                    this.editItem.content = this.editorContent;
                    if (this.fileList.length > 0) {
                        this.editItem.files = this.fileList[0].url;
                    }
                    this.editItem.beginDate = this.dateSting[0];
                    this.editItem.endDate = this.dateSting[1];
                    console.log("开始保存:", this.editItem);
                    this.editItem.createDate = null;
                    this.editItem.submitDate = null;
                    this.editItem.planContentList = this.detailData;
                    save(this.editItem)
                        .then(response => {
                            if (response.code === 200) {
                                this.$message.success("保存成功");
                                //刷新 列表
                                this.PageList();
                                this.selectedKeys = [];
                                this.eidtModelShow = false;
                            } else {
                                // this.$message.warning(response.message);
                            }
                        })
                }
            });
        },
        //报送计划
        submit () {
            console.log(this.submitUserId, this.submitUserName);
            if (!this.submitUserId) {
                this.$message.warning("报送人不能为空");
                return;
            }

            this.planEditem.ccId = this.ccUserIds;
            this.planEditem.ccName = this.ccUserNames;
            this.planEditem.submitId = this.submitUserId;
            this.planEditem.submitName = this.submitUserName;
            this.planEditem.createDate = null;
            this.planEditem.submitDate = null;

            submit(this.planEditem).then(response => {
                if (response.code == 200) {
                    this.submitVisible = false;
                    this.$message.success("报送成功");
                    this.PageList();
                } else {
                    this.PageList();
                    // this.$message.warning(response.message);
                }
            });
        },
        //撤回计划
        returnPlan (row) {
            this.$nlyaModal
                .msgBoxConfirm("您确定要撤回该计划吗？", {
                    title: "请确认是否需要马上撤回",
                    size: "sm",
                    buttonSize: "md",
                    okTitle: "是",
                    cancelTitle: "否",
                    titleTag: "h6",
                    headerClass: "p-2",
                    footerClass: "p-2",
                    hideHeaderClose: false,
                    centered: true
                })
                .then(value => {
                    if (value) {
                        row.status = 0;
                        returnPlan({ id: row.id }).then(res => {
                            if (res.code == 200) {
                                this.$message.success("撤回计划成功");
                                this.PageList();
                            } else {
                                // this.$message.warning(res.message);
                            }
                        });
                    }
                });
        },
        //计划明细完成状态
        statusChange () {
            if (this.detailData.some(item => item.status == 0)) {
                this.finishStatus = "false";
            } else {
                this.finishStatus = "true";
            }
        },
        //保存评价
        saveEvaluation () {
            const data = {};
            data.notFinishCause = this.notFinishCause;
            data.finishStatus = this.finishStatus;
            data.evaluationContent = this.evaluationContent;
            data.evaluationLevel = this.evaluationLevel;
            data.id = this.editItem.id;
            data.planContentList = this.detailData;
            saveEvaluation(data).then(response => {
                if (response.code === 200) {
                    this.$message.success("保存成功");
                    //刷新 列表
                    this.PageList();
                    this.selectedKeys = [];
                    this.eidtModelShow = false;
                } else {
                    // this.$message.warning(response.message);
                }
            })
        },
        handleChange (value) {
            if (value == '日') {
                const beginDate = moment(new Date()).format("YYYY-MM-DD");
                const endDate = moment(new Date()).format("YYYY-MM-DD");
                this.dateSting = [beginDate, endDate];
                this.form.setFieldsValue({ formDate: [beginDate, endDate] });
            } else if (value == '周') { //本周
                const beginDate = getDate.getCurrWeekDays().starttime;
                const endDate = getDate.getCurrWeekDays().endtime;
                this.dateSting = [beginDate, endDate];
                this.form.setFieldsValue({ formDate: [beginDate, endDate] });
            } else if (value == '月') { //本月
                const beginDate = getDate.getCurrMonthDays().starttime;
                const endDate = getDate.getCurrMonthDays().endtime;
                this.dateSting = [beginDate, endDate];
                this.form.setFieldsValue({ formDate: [beginDate, endDate] });
            } else if (value == '季') { //本季度
                const beginDate = getDate.getCurrQuarter().starttime;
                const endDate = getDate.getCurrQuarter().endtime;
                this.dateSting = [beginDate, endDate];
                this.form.setFieldsValue({ formDate: [beginDate, endDate] });
            } else if (value == '年') { //本年
                const beginDate = getDate.getCurrYear().starttime;
                const endDate = getDate.getCurrYear().endtime;
                this.dateSting = [beginDate, endDate];
                this.form.setFieldsValue({ formDate: [beginDate, endDate] });
            }
        },
        //计划table选择
        selection (keys, info) {
            this.selectedKeys = keys;
            const ids = new Array();
            info.forEach(function (val) {
                ids.push(val.id);
            });
            this.selectedIds = ids;
            this.selectedData = info;
        },
        //table分页触发
        onTableChange (pagination, filters, sorter) {
            Object.assign(this.postData, {
                current: pagination.current,
                size: pagination.pageSize
            });
            Object.assign(this.pagination, {
                current: pagination.current,
                pageSize: pagination.pageSize
            });
            this.PageList();
        },
        changePageSize (e) {
            const value = e.target.value;
            const { pagination } = this;

            console.log(e, value);
            Object.assign(this.postData, {
                size: value
            });
            Object.assign(this.pagination, {
                pageSize: Number.parseInt(value)
            });
            this.PageList();
        },
        reset () {
            this.postData = { ...basePostData };
        },
        onCellChange (key, dataIndex, value) {
            const dataSource = [...this.detailData];
            const target = dataSource.filter(item => key === item.key)[0];
            if (target) {
                target[dataIndex] = value;
                this.detailData = dataSource;
            }
        },
        //用户tree选择
        userCheck (keys, info) {
            console.log(keys);
            this.ccUserNames = "";
            this.ccUserIds = "";
            if (info.checkedNodes.length > 0) {
                for (let i = 0; i < info.checkedNodes.length; i++) {
                    const id = info.checkedNodes[i].data.props.id;
                    const name = info.checkedNodes[i].data.props.name;
                    if (id.indexOf("user") != -1) {
                        this.ccUserNames += name + ",";
                        this.ccUserIds += id.split("_")[0] + ",";
                    }
                }
                this.ccUserNames = this.ccUserNames.slice(0, this.ccUserNames.length - 1);
                this.ccUserIds = this.ccUserIds.slice(0, this.ccUserIds.length - 1);
            }
        },
        //用户tree展开
        expanedChange (key, info) {
            this.expandedUserKeys = key;
        },
        //用户搜索
        onChange (e) {
            const value = e.target.value;
            console.log(value);
            if (value) {
                this.treeAShow = true;
                this.treeBShow = false;
                const keys = [];
                const treeData = searchInTreeData(
                    keys,
                    this.userAllData,
                    "title",
                    value
                );
                this.userSearchData = treeData;
                this.expandedUserKeys = keys;
            } else {
                this.treeAShow = false;
                this.treeBShow = true;
                //this.areaTreeData = treeAreaData;
                this.expandedUserKeys = [];
            }
        },
        onCellChange (key, dataIndex, value) {
            const dataSource = [...this.detailData];
            const target = dataSource.filter(item => key === item.key)[0];
            if (target) {
                target[dataIndex] = value;
                this.detailData = dataSource;
            }
        },
        handleAdd () {
            if (this.tabKey == 1) {
                const { count, detailData } = this;
                const newData = {
                    key: count,
                    content: "",
                    status: "0",
                    cause: "",
                    remarks: ""
                };
                this.detailData = [...detailData, newData];
                this.count = count + 1;
            }
        },
        uploadFile (info) {
            let fileList = [...info.fileList];
            fileList = fileList.map(file => {
                if (file.response) {
                    file.url = file.response.url;
                    file.id = file.response.id;
                }
                return file;
            });
            this.fileList = fileList;
        },
        dateChange (date, dateString) {
            console.log("dateString", dateString);
            this.dateSting = dateString;
        }
    },
    watch: {}
};
</script>
<style scoped scoped lang="less">
    .form-inline label {
        justify-content: left !important;
    }
    .form-inline > .col {
        margin-bottom: 1.5rem !important;
    }
    .ant-advanced-search-form {
        padding: 24px;
        background: #fbfbfb;
    }

    .ant-advanced-search-form .ant-form-item {
        display: flex;
    }

    .ant-advanced-search-form .ant-form-item-control-wrapper {
        flex: 1;
    }

    #components-form-demo-advanced-search .ant-form {
        max-width: none;
    }
    #components-form-demo-advanced-search .search-result-list {
        margin-top: 16px;
        background-color: #fafafa;
        min-height: 200px;
        text-align: center;
        padding-top: 80px;
    }

    /* tile uploaded pictures */
    .ant-popover-inner {
        z-index: 2999;
    }
</style>

<style lang="less">
    @import '~@/style/work.less';
    .edit-modal-class {
        .ant-modal-body:first-child {
            height: 510px !important;
            overflow-y: auto !important;
            overflow-x: none;
        }
        .ant-form-item {
            margin-bottom: 5px !important;
        }
    }
</style>
